<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<link rel="stylesheet" href="../font-awesome/css/font-awesome.css">
		<link rel="stylesheet" href="../css/mui.css">
		<link rel="stylesheet" href="./css/demo-common.css">
		<link rel="stylesheet" href="./css/atom-one-light.css">
		<script src="./js/jquery-2.2.3.min.js"></script>
		<script src="./js/highlight.pack.js"></script>
		<style>
			h1,h2,h3,h4,h5,h6 {margin: 10px 0;}
		</style>
	</head>
	<body>
		<h3>基本样式</h3>

		<h4>全局样式</h4>
		<div class="example">
			<p>盒模型统一采用<mark>box-sizing: border-box</mark>，默认字体颜色为<mark>#333</mark>，默认字体大小为<mark>14px</mark>，默认行距为<mark>1.428</mark>。</p>
			<p>同时使用了 <a href="http://necolas.github.io/normalize.css/">Normalize.css</a> 增强跨浏览器一致性。</p>
		</div>

		<h4>链接</h4>
		<section>
			<div class="example">
				<a href="http://www.sina.com.cn">新浪</a>
				<a href="http://www.baidu.com">百度</a>
				<a href="http://www.jd.com">京东</a>
			</div>
			<pre><code>
	&lt;a href="http://www.sina.com.cn"&gt;新浪&lt;/a&gt;
	&lt;a href="http://www.baidu.com"&gt;百度&lt;/a&gt;
	&lt;a href="http://www.jd.com"&gt;京东&lt;/a&gt;
			</code></pre>
		</section>

		<h4>标题</h4>
		<section>
			<div class="example">
				<h1>h1 这是一个标题 <small>这里是副标题</small></h1>
				<h2>h2 这是一个标题 <small>这里是副标题</small></h2>
				<h3>h3 这是一个标题 <small>这里是副标题</small></h3>
				<h4>h4 这是一个标题 <small>这里是副标题</small></h4>
				<h5>h5 这是一个标题 <small>这里是副标题</small></h5>
			</div>
			<pre><code>
	&lt;h1&gt;h1 这是一个标题 &lt;small&gt;这里是副标题&lt;/small&gt;&lt;/h1&gt;
	&lt;h2&gt;h2 这是一个标题 &lt;small&gt;这里是副标题&lt;/small&gt;&lt;/h2&gt;
	&lt;h3&gt;h3 这是一个标题 &lt;small&gt;这里是副标题&lt;/small&gt;&lt;/h3&gt;
	&lt;h4&gt;h4 这是一个标题 &lt;small&gt;这里是副标题&lt;/small&gt;&lt;/h4&gt;
	&lt;h5&gt;h5 这是一个标题 &lt;small&gt;这里是副标题&lt;/small&gt;&lt;/h5&gt;
			</code></pre>
		</section>

		<h4>文本</h4>
		<section>
			<div class="example" >
				<h5>字体大小</h5>
				<p>你可以使用类名<mark>.font12</mark>~<mark>.font36</mark>，分别对应<mark>12px</mark>~<mark>36px</mark>的字体。</p>
			</div>
			<div class="example" style="border-top: 1px solid #ccc">
				<h5>文本颜色</h5>
				<div>
					<span class="primary">产品色文本</span>&nbsp;
					<span class="green">绿色文本</span>&nbsp;
					<span class="red">红色文本</span>
				</div>
			</div>
			<pre><code>
	&lt;span class="primary"&gt;产品色文本&lt;/span&gt;
	&lt;span class="green"&gt;绿色文本&lt;/span&gt;
	&lt;span class="red"&gt;红色文本&lt;/span&gt;
			</code></pre>
			<div class="example" style="border-top: 1px solid #ccc">
				<h5>标记文本</h5>
				<div>
					<p>
						只有6支球队连续至少两年进入了欧冠决赛，他们是<mark>AC米兰</mark>、<mark class="primary">阿贾克斯</mark>、<mark class="green">尤文图斯</mark>、<mark class="red">瓦伦西亚</mark>、曼联和拜仁。
					</p>
				</div>
			</div>
			<pre><code>
	&lt;p&gt;
		只有6支球队连续至少两年进入了欧冠决赛，他们是&lt;mark&gt;AC米兰&lt;/mark&gt;、&lt;mark class="green"&gt;尤文图斯&lt;/mark&gt;、&lt;mark class="red"&gt;瓦伦西亚&lt;/mark&gt;、曼联和拜仁。
	&lt;/p&gt;
			</code></pre>
			<div class="example" style="border-top: 1px solid #ccc">
				<h5>文本排列</h5>
				<p class="left-align">这是一段文本。向左排列</p>
				<p class="center-align">这是一段文本。水平居中</p>
				<p class="right-align">这是一段文本。向右排列</p>
			</div>
			<pre><code>
	&lt;p class="left-align"&gt;这是一段文本。向左排列&lt;/p&gt;
	&lt;p class="center-align"&gt;这是一段文本。水平居中&lt;/p&gt;
	&lt;p class="right-align"&gt;这是一段文本。向右排列&lt;/p&gt;
			</code></pre>
			<div class="example" style="border-top: 1px solid #ccc">
				<h5>文本截断</h5>
				<div style="width:100px;padding:10px;border:1px solid #ccc">
					<p class="truncate">这是一个被截断的文本。</p>
				</div>
			</div>
			<pre><code>
	&lt;p class="truncate"&gt;这是一个被截断的文本。&lt;/p&gt;
			</code></pre>
			<div class="example" style="border-top: 1px solid #ccc">
				<h5>禁止选择文本</h5>
				<p class="no-select">这里的文字禁止选择。</p>
			</div>
			<pre><code>
	&lt;p class="no-select"&gt;这里的文字禁止选择。&lt;/p&gt;
			</code></pre>
		</section>

		<h4>图标</h4>
		<p>MUI采用 <a href="http://fontawesome.io/" target="_blank"> font-awesome</a> 作为字体图标。请在使用时引入。&nbsp;&nbsp;&nbsp;<a href="http://fontawesome.io/get-started/" target="_blank">如何使用</a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="http://fontawesome.io/icons/">Icons</a></p>
		<section>
			<div class="example">
				<div>
					<i class="fa fa-cloud"></i>&nbsp;&nbsp;
					<i class="fa fa-bank"></i>&nbsp;&nbsp;
					<i class="fa fa-check green"></i>&nbsp;&nbsp;
					<i class="fa fa-close red"></i>&nbsp;&nbsp;
				</div>
				<br>
				<div>
					<i class="fa fa-cloud font18"></i>&nbsp;&nbsp;
					<i class="fa fa-bank font18"></i>&nbsp;&nbsp;
					<i class="fa fa-check green font18"></i>&nbsp;&nbsp;
					<i class="fa fa-close red font18"></i>&nbsp;&nbsp;
				</div>
			</div>
		<pre><code>
	&lt;i class="fa fa-cloud"&gt;&lt;/i&gt;
	&lt;i class="fa fa-bank"&gt;&lt;/i&gt;
	&lt;i class="fa fa-check green"&gt;&lt;/i&gt;
	&lt;i class="fa fa-close red"&gt;&lt;/i&gt;	

	&lt;i class="fa fa-cloud font18"&gt;&lt;/i&gt;
	&lt;i class="fa fa-bank font18"&gt;&lt;/i&gt;
	&lt;i class="fa fa-check green font18"&gt;&lt;/i&gt;
	&lt;i class="fa fa-close red font18"&gt;&lt;/i&gt;		
		</code></pre>
		</section>


		<h4>辅助类</h4>
		<section>
			<div class="example">
				<h5>浮动</h5>
				<p>使用类<mark>.fl</mark>和<mark>.fr</mark>即可实现浮动效果。</p>
				<p>注意：务必在父元素上添加<mark>.clearfix</mark>类清除浮动。</p>
				<br>
				<div class="clearfix">
					<div class="fl" style="background-color: #eee">向左浮动</div>
					<div class="fr" style="background-color: #eee">向右浮动</div>
				</div>
			</div>
			<pre><code>
	&lt;div class="clearfix"&gt;
		&lt;div class="fl"&gt;向左浮动&lt;/div&gt;
		&lt;div class="fr"&gt;向右浮动&lt;/div&gt;
	&lt;/div&gt;
			</code></pre>
			<div class="example" style="border-top: 1px solid #ccc">
				<h5>圆形</h5>
				<br>
				<span class="circle" style="display:inline-block;width:50px;height:50px;background-color:#76a497"></span>
			</div>
			<pre class="html"><code>
	&lt;span class="circle" style="display:inline-block;width:50px;height:50px;background-color:#76a497"&gt;&lt;/span&gt;
			</code></pre>
		</section>

		<script>
			$(document).ready(function() {
			    $('pre code').each(function(i, block) {
			        hljs.highlightBlock(block);
			    });
			});
		</script>
	</body>
</html>